<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.management_remove"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   size="small"
                   icon="el-icon-open"
                   v-if="scope.row.enableStatus==1&&permission.management_enable"
                   @click="switchState(scope.row,0)">禁 用
        </el-button>
        <el-button type="text"
                   size="small"
                   icon="el-icon-turn-off"
                   v-if="scope.row.enableStatus==0&&permission.management_enable"
                   @click="switchState(scope.row,1)">启 用
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
    import {getList, save, update, remove, switchStatus} from "@/api/system/management";
    import {mapGetters} from "vuex";
    import {validateURL, isMobile, isPhone, validatename} from "@/util/validate";

    export default {
        data() {
            const ipValidate = (rule, value, callback) => {
                if (/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/.test(value)) {
                    callback();
                } else {
                    callback(new Error("输入地址不正确！"))
                }
            };
            const accessAddressValidate = (rule, value, callback) => {
                if (validateURL(value)) {
                    callback();
                } else {
                    callback(new Error("访问地址不正确！"))
                }
            };
            const phoneValidate = (rule, value, callback) => {
                if (isMobile(value) || isPhone(value)) {
                    callback();
                } else {
                    callback(new Error("联系人电话不正确！"))
                }
            };
            const contactsValidate = (rule, value, callback) => {
                if (validatename(value)) {
                    callback();
                } else {
                    callback(new Error("联系人不正确！"))
                }
            };
            return {
                form: {},
                query: {},
                loading: true,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                selectionList: [],
                option: {
                    height: 'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: true,
                    selection: true,
                    dialogClickModal: false,
                    labelWidth: 150,
                    menuWidth: 280,
                    column: [
                        {
                            label: "系统名称",
                            prop: "systemName",
                            search: true,
                            rules: [{
                                required: true,
                                message: "请输入系统名称",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "IP地址",
                            prop: "ipAddress",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入IP地址",
                                trigger: "blur"
                            }, {
                                validator: ipValidate,
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "APPKEY",
                            prop: "appKey",
                            rules: [{
                                required: true,
                                message: "请输入APPKEY",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "提供单位",
                            prop: "systemProvider",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入应用系统提供单位",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "部署地点",
                            prop: "deploymentLocation",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入系统部署地点",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "联系人",
                            prop: "contacts",
                            rules: [{
                                required: true,
                                message: "请输入联系人",
                                trigger: "blur"
                            }, {
                                validator: contactsValidate,
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "联系人电话",
                            prop: "contactPhone",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入联系人电话",
                                trigger: "blur"
                            }, {
                                validator: phoneValidate,
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "访问地址",
                            prop: "systemAccessAddress",
                            hide: true,
                            span: 12,
                            rules: [{
                                required: true,
                                message: "请输入系统访问地址",
                                trigger: "blur"
                            }, {
                                validator: accessAddressValidate,
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "APPSECRET",
                            prop: "appSecret",
                            hide: true,
                            addDisplay: false,
                            editDisplay: false,
                        },
                        {
                            label: "是否启用",
                            prop: "enableStatus",
                            hide: true,
                            type: 'radio',
                            dicData: [
                                {
                                    label: '启用',
                                    value: 1
                                },
                                {
                                    label: '禁用',
                                    value: 0
                                },
                            ],
                            value: 1,
                            rules: [{
                                required: true,
                                message: "请选择是否启用",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            addDisplay: false,
                            editDisplay: false,
                        },
                        {
                            label: "备注",
                            prop: "remarks",
                            span: 24,
                            hide: true,
                            type: 'textarea',
                            maxlength: 1500,
                            minRows: 3,
                            showWordLimit: true
                        },
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permission.management_add, false),
                    viewBtn: this.vaildData(this.permission.management_view, false),
                    delBtn: this.vaildData(this.permission.management_remove, false),
                    editBtn: this.vaildData(this.permission.management_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        methods: {
            switchState(row, newState) {
                let msg = '';
                if (newState == 1) {
                    msg = "确定启用这个应用系统？"
                } else {
                    msg = "确定禁用这个应用系统？"
                }
                this.$confirm(msg, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        row.enableStatus = newState;
                        return switchStatus(row);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            rowSave(row, done, loading) {
                save(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    loading();
                    window.console.log(error);
                });
            },
            rowUpdate(row, index, done, loading) {
                update(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    loading();
                    console.log(error);
                });
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(this.ids);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1;
                this.onLoad(this.page, params);
                done();
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            onLoad(page, params = {}) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    this.selectionClear();
                });
            }
        }
    };
</script>

<style>
</style>
